import { useState, useEffect } from 'react'; // react属性
import './index.css' // 样式引入
import { Image, NavBar, ImageViewer } from 'antd-mobile' // 组件引入
import { useLocation, useNavigate } from 'react-router-dom' // 路由
import { getMoyu,getWallpaper } from '@/api/index' // 摸鱼日历 风景图片


function MyPicture() {

  /* 路由 */
  const navigate = useNavigate();
  const location = useLocation();
  const params = new URLSearchParams(location.search);
  const pageTitle: string = params.get('title') || '默认页面'

  /* 声明变量 */
  const [imgUrl, setImgUrl] = useState<string>('') // 图片地址

  /* 事件函数 */
  // 获取图片地址
  const getImgUrl = async () => {
    try {
      const getApi = pageTitle === '摸鱼日历' ? getMoyu : getWallpaper
      const res = await getApi({ type: 'json' })
      console.log(res);
      setImgUrl(res.data.url)
    } catch (error) {
      console.log(error);
    }
  }

  /* 函数调用 */
  useEffect(() => {
    getImgUrl()

  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []); // 注意这里的空数组，表示这个 effect 只在组件挂载时运行

  return (
    <div className="picture-container">
      <NavBar onBack={() => navigate(-1)}>{pageTitle}</NavBar>
      <div className='content'>
        <div className='photo-frame'>
          <Image className='img' onClick={() => {
            ImageViewer.Multi.show({ images: [imgUrl] })
          }} src={imgUrl} />
        </div>
      </div>
    </div>
  )
}

export default MyPicture